[Day9] 操作頁面行為(v-on)

第 12 屆 iThome 鐵人賽

DAY 9

Modern Web

少年學Vue，如隙中窺月系列第 9 篇

12th鐵人賽

Leo

2020-09-23 21:38:04

1035 瀏覽

分享至

方法綁定按鈕

假如我們要在 Vue 中使用自定義的方法，此時我們可以在宣告好的 Vue 物件底下加上 methods，而 methods 裡面就可以用物件的方式宣告自定義的方法，如程式範例的 reverse 方法，並且用 Vue 的 v-on 指令將 button 還有 reverse 方法綁定，此時當我們點擊 button 就可以看到 console 跳出 test 文字，代表按鈕和方法有綁定成功。

<body>
    <div class="app">
        {{text}}
        <button v-on:click="reverse">反轉字串</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:'1234'
        },
        methods: {
            reverse:function (){
                console.log('test');
            }
        }
    });
</script>

反轉字串邏輯

<body>
    <div class="app">
        {{text}}
        <button v-on:click="reverse">反轉字串</button>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:'1234'
        },
        methods: {
            reverse:function (){
                this.text=this.text.split('').reverse().join('');
            },
        }
    });
</script>

接下來我們來實作一個反轉字串的方法，我們會使用到 js 內建的函式庫來完成這個方法。

split ()
- 將字串分割成更小的字串，用陣列方式回傳。參數內如果使用 "" 空字符的話，將會以每個字符(字母)為分割單位。
reverse ()
- 反轉原本陣列中的元素順序，不會創建新陣列。
join ()
- 將陣列元素合併成一個字串。參數內如果使用 "" 空字符的話，將不會在陣列元素之間加入任何符號，而直接合成一個字串。如果參數是用 "," ，則陣列元素合成字串時會用逗號隔開。
this 關鍵字
- 如果我們的方法要使用 data 中的資料，必須使用關鍵字 this 來指定 Vue 物件之後才能使用 data 中的資料，不然他會顯示資料沒有定義。